<template>
	<view>
		<u-swiper :list="list" height='750'></u-swiper>
		<view class="u-p-40">
			<view class="u-font-34">
				{{name}}
			</view>
			<view class="u-tips-color u-font-24 u-m-t-10 u-m-b-10">
				{{remarks}}
			</view>
			<view class="u-m-b-10" style="color: red;">
				￥{{price | getPrice}}
			</view>
			<view class="u-flex">
				<view class="u-flex-1 u-tips-color">
					运费：免运费
				</view>
				<view class="u-flex-1 u-tips-color">
					剩余：{{stock}}
				</view>
			</view>
		</view>
		<view v-html="detail"></view>
		<view class="navigation">
			<view class="u-abso w-sq" v-if="stock==0">
				该商品已售罄
			</view>
			<view class="left">
				<view class="item" @click="goPage(0)">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item" @click="collect">
					<u-icon name="heart" :size="40" :color="ifLike?$u.color['warning']:$u.color['contentColor']">
					</u-icon>
					<view class="text u-line-1">收藏</view>
				</view>
				<view class="item car" @click="goPage(2)">
					<u-badge class="car-num" :count="carNum" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" :class="{disabled:stock==0}" @click="submitBar('car')">加入购物车</view>
				<view class="buy btn u-line-1" :class="{disabled:stock==0}" @click="submitBar('pay')">立即购买</view>
			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<u-popup v-model="show" mode="bottom" closeable>
			<view class="u-p-30">
				<view class="u-flex">
					<u-image width="160rpx" height="160rpx" :show-loading='false'
						:src="pic"></u-image>
					<view class="u-m-l-60">
						<view class="u-font-36" style="color: red;">
							￥{{selectPrice | getPrice}}
						</view>
						<view class="u-font-22 u-tips-color u-m-t-10 u-m-b-10">
							剩余 {{stock_num}} 件
						</view>
						<view class="u-font-22 u-tips-color" v-if="defaultSelect">
							已选择 {{defaultSelect}}
						</view>
					</view>
				</view>
				<view v-for="(item,index) in tree" :key="index">
					<w-detail-type :haveSku='haveSku' :index='index' :title="item.k" :data="item.v" @selectType='selectType'>
					</w-detail-type>
				</view>
				<view class="u-m-t-30 u-flex u-row-between">
					<text>购买数量</text>
					<u-number-box :min="1" :max='stock_num' v-model="value" @change="valChange"></u-number-box>
				</view>
				<u-button class='u-m-t-30' type="error" shape="circle" @click='submit'>确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getGoods,
		userCartAdd,
		userIfLike,
		userAdd,
		userDislike
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo', 'login', 'carNum'])
		},
		data() {
			return {
				data: [],
				show: false,
				list: [],
				name: '',
				remarks: '',
				price: '',
				stock: 1,
				detail: '',
				selectPrice: 0,
				stock_num: 0,
				defaultSelect: '',
				defaultList: [],
				tree: [],
				skuList: [],
				value: 1,
				type: null,
				idGoods: 0,
				idSku: '',
				ifLike: false,
				pic:'',
				haveSku:{
					name:'',
					list:[]
				}
			}
		},
		onLoad(e) {
			this.idGoods = e.id
			this.getGoods(e.id)
			if(this.login){
				this.userIfLike()
				this.$store.dispatch('userCartCount')
			}
		},
		methods: {
			collect() {
				if (this.login == 0) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				const token = uni.getStorageSync('sessionid')
				if (this.ifLike) {
					userDislike({
						idUser: this.userInfo.id,
						idGoods: this.idGoods,
						JSESSIONID: token
					}).then(res => {
						this.ifLike = false
						this.$u.toast('取消收藏成功')
					})
				} else {
					userAdd({
						idUser: this.userInfo.id,
						idGoods: this.idGoods,
						JSESSIONID: token
					}).then(res => {
						this.ifLike = true
						this.$u.toast('添加收藏成功')
					})
				}
			},
			userIfLike() {
				const token = uni.getStorageSync('sessionid')
				userIfLike({
					idUser: this.userInfo.id,
					idGoods: this.idGoods,
					JSESSIONID: token
				}).then(res => {
					this.ifLike = res
				})
			},
			goPage(index) {
				this.$store.commit('setShopIndexm', index)
				this.$u.route({
					url: '/pages/shop/shop',
					type: 'tab'
				})
			},
			selectType(item, index) {
				this.defaultSelect = ''
				this.defaultList[index] = item
				this.defaultList.forEach(item => {
					this.defaultSelect += item.name + ' '
				})
				let haveSku = []
				this.skuList.forEach(val=>{
					if(val[`s${index+1}`]==`${item.id}`){
						haveSku=[...haveSku,...val.code.split(',')]
					}
				})
				this.haveSku={
					list : haveSku,
					name:`s${index+1}`
				}
				this.skuList.forEach(item => {
					if (haveSku.toString().includes(item.code)) {
						this.selectPrice = item.price
						this.stock_num = item.stock_num
						this.idSku = item.id
					}
				})
			},
			getGoods(id) {
				getGoods(id).then(res => {
					this.list = res.goods.gallery.split(',').map(item => {
						return $shopImgUrl + item
					})
					this.name = res.goods.name
					this.remarks = res.goods.remarks
					this.price = res.goods.price
					this.stock = res.goods.stock
					this.detail = res.goods.detail.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;"')
					this.pic = $shopImgUrl + res.goods.pic
					this.tree = res.sku.tree
					if(res.sku.tree.length==0){
						this.selectPrice = res.sku.price
						this.stock_num = res.sku.stock_num
					}
					this.skuList = res.sku.list
					uni.setNavigationBarTitle({
						title:this.name
					})
				})
			},
			submit() {
				console.log(this.type)
				if(this.stock_num==0){
					this.$u.toast('库存不足')
					return
				}
				const token = uni.getStorageSync('sessionid')
					userCartAdd({
						idUser: this.userInfo.id,
						idGoods: this.idGoods,
						count: this.value,
						idSku: this.idSku,
						JSESSIONID: token
					}).then(res => {
						this.show = false
						this.$store.dispatch('userCartCount')
						if (this.type == 'pay') {
							this.$store.dispatch('cartQueryByUser',{idGoods: this.idGoods,idSku: this.idSku})
							this.goPage(2)
						}else{
							this.$store.dispatch('cartQueryByUser',{})
						}
					})
			},
			submitBar(type) {
				if (this.login == 0) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						success: (res) => {
							if (res.confirm) {
								this.$u.route('/pages/login/login')
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				this.show = true
				this.type = type
			},
			valChange(e) {
				this.value = e.value
			}
		}
	}
</script>

<style scoped lang="scss">
	.navigation {
		display: flex;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		.disabled {
		    pointer-events: none;
		    cursor: default;
		    opacity: 0.6;
		}
		.w-sq{
			top: -60rpx;
			left: 0;
			width: 100%;
			background-color: #82848a;
			padding: 10rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
